<template>
  <div>
    <van-nav-bar left-arrow title="新增拜访信息" @click-left="$router.push('/visit')">
      <template #right>
        <van-icon name="wap-home-o" size="24" />
      </template>
    </van-nav-bar>
    <van-cell-group class="custname">
      <van-field
        v-model="custName"
        label="客户名称"
        placeholder="点击选择"
        required
        @click="choiceCustClick"
      />
    </van-cell-group>
    <van-field v-model="searchValue" label="拜访标题" required />
    <van-field
      readonly
      clickable
      label="拜访原因"
      :value="reasonValue"
      @click="showPicker = true"
      required
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      label="拜访时间"
      :value="String(sj)"
      @click="showTimePicker = true"
      required
    />
    <van-popup v-model="showTimePicker" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onTimeConfirm"
      />
    </van-popup>
    <van-field
      v-model="addressVal"
      rows="1"
      autosize
      label="拜访地址"
      type="textarea"
      placeholder="请输入"
      class="msg"
    />
    <van-field
      v-model="situationVal"
      rows="1"
      autosize
      label="拜访情况"
      type="textarea"
      placeholder="请输入"
      class="msg"
    />
    <van-field
      v-model="competeVal"
      rows="1"
      autosize
      label="竞争信息收集情况"
      type="textarea"
      placeholder="请输入"
      class="msg"
    />
    <div class="btn">
      <van-button round type="info" @click="bcClick">保存</van-button>
    </div>
  </div>

  <!--  -->
</template>

<script>
import { NewAddVisitData } from "@/request/api";
export default {
  data() {
    return {
      searchValue: "",
      reasonValue: "",
      custName: this.$route.query.custname || "",
      value: "",
      // 地址
      addressVal: "",
      // 情况
      situationVal: "",
      // 竞争
      competeVal: "",
      showTimePicker: false,
      showPicker: false,
      timeColumns: [],
      columns: ["例行走访", "售中支撑", "售前支撑", "售后支撑", "商务访谈"],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      sj: "",
    };
  },
  created() {
    console.log(this.$route.query.id);
  },
  methods: {
    onConfirm(value) {
      this.reasonValue = value;
      this.showPicker = false;
    },
    onTimeConfirm(val) {
      let month = val.getMonth() + 1;
      this.sj = `${val.getFullYear()}-${month < 10 ? "0" + month : month}-${
        val.getDate() < 10 ? "0" + val.getDate() : val.getDate()
      } 16:50:10`;
      console.log("2020-08-08 16:50:10");
      console.log(this.sj);
      this.showTimePicker = false;
    },
    bcClick() {
      NewAddVisitData({
        custId: this.$route.query.id,
        custName: this.custName,
        visitTime: this.sj,
        visitAddress: this.addressVal,
        visitTitle: this.searchValue,
        visitReason: this.reasonValue,
        visitSituation: this.situationVal,
        collectSituation: this.competeVal,
      }).then((res) => {
        console.log(res);
        console.log("新增成功");
        this.$router.push("/visit")
      }).catch(err=>{
        console.log(err);
      });
    },
    // 选择客户
    choiceCustClick() {
      this.$router.push("/choicecust");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
}
.custname {
  margin: 10px 0;
}
.msg {
  margin-top: 10px;
  height: 110px;
}
.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .van-button {
    width: 100%;
  }
}
</style>